<template>
  <view class="pop-order-remark">
    <u-popup
      ref="order_remark_pop"
      bgColor="#ffffff"
      :show="show_pop"
      mode="bottom"
      :closeOnClickOverlay="true"
      round="30"
      @close="onClose"
      @open="onOpen">
      <view class="info-modal-wrap">
        <view class="info-modal-inner">
          <view class="modal-head flex-center">
            <view class="title-box">积分抵扣</view>
          </view>
          <view class="modal-ctx">
            <view class="input-box">
              <!-- 		<input v-model="points_value" type="digit" placeholder="请输入需要抵扣的积分数量" placeholder-class="input-p"
								@input="onInputPoints" /> -->

              <u--input
                v-model="points_value"
                type="digit"
                placeholder="请输入需要抵扣的积分数量"
                fontSize="15px"
                color="#000000"
                :customStyle="{
                  background: '#F6FAFD',
                  padding: '0 12px',
                  height: '36px',
                }"
                border="none"
                clearable
                placeholderClass="input-p"
                @change="onChangePoints"></u--input>
            </view>
            <view class="tip-box flex-between">
              <text>
                剩余积分：{{ user_info.jifen || 0 }} (可用积分：{{
                  max_allow_use_jifen || 0
                }})
              </text>
              <text>抵扣比例：{{ jifenrule.jifen || 1 }}/1</text>
            </view>
          </view>
          <view class="modal-foot">
            <view class="footer-wrap">
              <view class="btns">
                <view class="btn flex-center" @click="doConfirm()">确定</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      show_pop: false,
      points_value: "",
      user_info: {},
      pay_info: {
        jifen_pay: {},
      },
      jifen_pay: {
        // if_open: 1,//是否开启积分抵现
        // jifen: "17",//可用积分
        // money: "1.70",//可抵扣金额
        // rule: 10//抵扣比例 rule 积分抵扣 1元
      },
      max_allow_use_jifen: 0, //最大可使用积分
      real_payment_money: "",
      jifenrule: "",
    };
  },
  computed: {},
  watch: {},
  methods: {
    init(pay_info = {}, real_payment_money) {
      this.user_info = uni.getStorageSync("vuex_user") || {};
      this.show_pop = true;
      this.pay_info = pay_info;
      this.jifen_pay = pay_info.jifenPay || {};
      this.jifenrule = pay_info.jifenrule || {};
      this.real_payment_money = real_payment_money || "";
      if (this.real_payment_money >= this.jifen_pay.money) {
        this.max_allow_use_jifen = (
          this.jifenrule.jifen * this.jifenrule.maxMoney
        ).toFixed(2);
      } else {
        this.max_allow_use_jifen =
          real_payment_money * this.jifen_pay.rule.toFixed(2);
      }
      this.max_allow_use_jifen =
        this.user_info.jifen > this.max_allow_use_jifen
          ? this.max_allow_use_jifen
          : this.user_info.jifen;
    },
    onClose() {
      this.show_pop = false;
    },
    onOpen() {},
    doClose() {
      this.show_pop = false;
    },

    onInputPoints(e) {
      console.log("输入积分 e", e.detail.value);
    },

    onChangePoints(value) {
      console.log(
        "改变积分 value",
        value,
        this.max_allow_use_jifen,
        Number(value) > Number(this.max_allow_use_jifen)
      );
      if (Number(value) > Number(this.max_allow_use_jifen)) {
        this.$nextTick(() => {
          this.points_value = this.max_allow_use_jifen;
        });
      } else if (value < 0) {
        this.$nextTick(() => {
          this.points_value = "";
        });
      }
      console.log("this.points_value", this.points_value);
    },

    doConfirm() {
      if ((parseInt(this.points_value) || 0) <= 0) {
        this.$alert("请填写积分数值");
        return;
      }
      this.$emit("confirm", this.points_value);
      this.show_pop = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.pop-order-remark {
  position: relative;
  z-index: 1000;
}

.info-modal-wrap {
  width: 100%;
  position: relative;
  text-align: left;
  padding-bottom: 0;
  // padding-bottom: calc(64rpx + constant(safe-area-inset-bottom));
  // padding-bottom: calc(64rpx + env(safe-area-inset-bottom));

  .info-modal-inner {
    border-radius: 16rpx;
    overflow: hidden;
    width: 100%;
    padding: 0 0;
    padding-bottom: 0;
    min-height: 400rpx;
    background: #ffffff;
  }
}

.modal-head {
  padding: 24rpx 40rpx;
  // border: 1rpx solid #DDDDDD;
  padding-right: 0;

  .title-box {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
  }
}

.modal-ctx {
  width: 100%;
  background-color: #fff;
  padding: 24rpx 32rpx;
  min-height: 500rpx;
  padding-bottom: 30rpx;

  .input-box {
    input {
      padding: 0 24rpx;
      width: 686rpx;
      height: 72rpx;
      background: #f6fafd;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }

    .input-p {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #999ca7;
    }
  }

  .tip-box {
    margin-top: 24rpx;

    text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
    }
  }
}

.footer-wrap {
  box-shadow: 0rpx -8rpx 20rpx 2rpx rgba(0, 0, 0, 0.06);
  padding: 20rpx;

  .safe-fixed-bottom {
    position: relative;
  }

  .btns {
    .btn {
      flex: 1;
      width: 100%;
      height: 80rpx;
      background: #f49c0d;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
